Q&Aのアコーディオンに挑戦

2020年5月8日 2020年5月8日 asamai-cts

asamai-cts

HPに「Q&A」のページを作ってみた。

しかし、表示された悪―ディオンには何か違和感が残る。プラグインを使っているが、マニュアルには注意書きとして作成した日付順でサイトに表示されるとの事・・・
解決方法は面倒だけどあるみたいだ。しかし、それぞれの開発環境で相性があるようだ。

アコーディオンの表示

正常な並びで表示できないので、かなり時間をかけて試行覚悟（これだけで数時間も掛かった）してみたが、プラグインと現行Ver.のWord Pressではうまく表示できないみたいだ。
質問項目が「Q1　Q2　Q3・・・」と順に積み重なる仕様のはずだが、作成日を後から再設定するといいらしい、仕様書のような表示とならない・・・

そんな訳で、ネット上の「サルワカ」さんから引用させてもらい、HTMLとCSSで作り直してみる。現在時刻、02：44。朝までに完成するかな？

昨夜は11時過ぎに寝たのだが、どうも気になって夢にまで出てきた。
ベッドの中で考えるより、即！　実践！　である。
それでは・・・

◆参考にさせてもらったHTMLとCSS◆

「サルワカ」さんのサイトを参考にさせていただきました。ありがとうございました。
https://saruwakakun.com/html-css/reference/accordion

HTML

&lt;div class="accbox">
  &lt;!--ラベル1-->
    &lt;label for="label1">クリックして表示1&lt;/label>
    &lt;input type="checkbox" id="label1" class="cssacc" />
    &lt;div class="accshow">
      &lt;!--ここに隠す中身-->
      &lt;p>
        こんにちは1
      &lt;/p>
    &lt;/div>
    &lt;!--//ラベル1-->
  &lt;!--ラベル2-->
    &lt;label for="label2">クリックして表示2&lt;/label>
    &lt;input type="checkbox" id="label2" class="cssacc" />
    &lt;div class="accshow">
      &lt;!--ここに隠す中身-->
      &lt;p>
        こんにちは2
      &lt;/p>
    &lt;/div>
    &lt;!--//ラベル2-->
  &lt;!--ラベル3-->
    &lt;label for="label3">クリックして表示3&lt;/label>
    &lt;input type="checkbox" id="label3" class="cssacc" />
    &lt;div class="accshow">
      &lt;!--ここに隠す中身-->
      &lt;p>
        こんにちは3
      &lt;/p>
    &lt;/div>
    &lt;!--//ラベル3-->
  &lt;!--ラベル4-->
    &lt;label for="label4">クリックして表示4&lt;/label>
    &lt;input type="checkbox" id="label4" class="cssacc" />
    &lt;div class="accshow">
      &lt;!--ここに隠す中身-->
      &lt;p>
        こんにちは4
      &lt;/p>
    &lt;/div>
    &lt;!--//ラベル4-->
&lt;/div>&lt;!--//.accbox-->

<label for="label1">クリックして表示1</label>

<p>

こんにちは1

</p>

</div>

<label for="label2">クリックして表示2</label>

<p>

こんにちは2

</p>

</div>

<label for="label3">クリックして表示3</label>

<p>

こんにちは3

</p>

</div>

<label for="label4">クリックして表示4</label>

<p>

こんにちは4

</p>

</div>

</div>

表示例

ここに質問の見出しを入力する

クリックして表示1

こんにちは1

クリックして表示2

こんにちは2

クリックして表示3

こんにちは3

クリックして表示4

こんにちは4

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅　　　　このテーマで使用する時は 100% に変更した*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

/*ボックス全体*/

.accbox {

margin: 2em 0;

padding: 0;

max-width: 400px;/*最大幅　　　　このテーマで使用する時は 100% に変更した*/

}

/*ラベル*/

.accbox label {

display: block;

margin: 1.5px 0;

padding : 11px 12px;

color :#2f8fcf;

font-weight: bold;

background :#a4cbf3;

cursor :pointer;

transition: all 0.5s;

}

/*ラベルホバー時*/

.accbox label:hover {

background :#85baef;

}

/*チェックは隠す*/

.accbox input {

display: none;

}

/*中身を非表示にしておく*/

.accbox .accshow {

height: 0;

padding: 0;

overflow: hidden;

opacity: 0;

transition: 0.8s;

}

/*クリックで中身表示*/

.cssacc:checked + .accshow {

height: auto;

padding: 5px;

background: #eaeaea;

opacity: 1;

}

Follow me!

@asamai_cts

投稿者プロフィール

asamai-ctsasamai-cts Owner

あさまいCTSの代表オヤジです（2021年現在＝60歳）
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会　実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年１月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成　その他何でも屋みたいなものです・・・